import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { DOMAIN } from '../constants';

interface SeoHeadProps {
  title: string;
  description: string;
  keywords?: string;
}

const SeoHead: React.FC<SeoHeadProps> = ({ title, description, keywords }) => {
    const location = useLocation();
    
    useEffect(() => {
        // Use window.location.href to get the full, correct URL including the hash.
        // The `location` dependency from `useLocation` ensures this effect re-runs on navigation.
        const fullUrl = window.location.href;

        document.title = title;

        const setMeta = (name: string, content: string) => {
            let element = document.querySelector(`meta[name="${name}"]`);
            if (!element) {
                element = document.createElement('meta');
                element.setAttribute('name', name);
                document.head.appendChild(element);
            }
            element.setAttribute('content', content);
        };
        
        const setProperty = (property: string, content: string) => {
            let element = document.querySelector(`meta[property="${property}"]`);
            if (!element) {
                element = document.createElement('meta');
                element.setAttribute('property', property);
                document.head.appendChild(element);
            }
            element.setAttribute('content', content);
        };
        
        setMeta('description', description);
        if (keywords) {
            setMeta('keywords', keywords);
        }

        // Open Graph / Facebook
        setProperty('og:title', title);
        setProperty('og:description', description);
        setProperty('og:type', 'website');
        setProperty('og:url', fullUrl);

        // Twitter
        setProperty('twitter:card', 'summary_large_image');
        setProperty('twitter:title', title);
        setProperty('twitter:description', description);
        
    }, [title, description, keywords, location]);

    return null;
};

export default SeoHead;